<template>
  <div>
    <el-card>
      <el-form ref="formRef" label-position="top" :model="formData" :rules="formRules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库编码">
              <el-input
                v-model="formData.code"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名字" prop="name" style="margin-left:25px;">
              <el-input v-model="formData.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型" prop="type" style="margin-left:25px;">
              <el-select v-model="formData.type" placeholder="请选择" clearable style="width:100%;">
                <el-option label="中转仓" value="ZZ" />
                <el-option label="加工仓" value="JG" />
                <el-option label="储备仓" value="CB" />
                <el-option label="冷藏仓" value="LC" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="省/市/区" prop="location">
              <el-cascader
                v-model="selectedOptions"
                clearable
                size="large"
                :options="options"
                style="width:80%; margin-bottom: 20px;"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="详细地址">
              <el-input v-model="formData.address" clearable placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" style="margin-left:25px" prop="status">
              <el-radio-group v-model="formData.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库面积">
              <el-input v-model="formData.surface" placeholder="请输入">
                <template slot="append">m³</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" style="margin-left:25px" prop="personName">
              <el-input v-model="formData.personName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" style="margin-left:25px">
              <el-input v-model="formData.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="buttonBox">
        <el-button class="unimportanceButton" @click="$router.go(-1)">返回</el-button>
        <el-button class="minorImportantButton" @click="submitFn">确定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCkApi, submitApi, getdetauksApi, editApi } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      formData: {
        name: '',
        type: '',
        location: '',
        address: '',
        status: 1,
        surface: '',
        personName: '',
        phone: '',
        code: '',
        province: '',
        city: '',
        area: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [{ required: true, message: '请输入仓库类型', trigger: 'blur' }],
        status: [{ required: true, message: '请选择仓库状态' }],
        location: [{ required: true, message: '请输入地址' }],
        personName: [{ required: true, message: '请输入负责人名称', trigger: 'blur' }]
      },
      options: regionData,
      selectedOptions: []
    }
  },
  created() {
    this.getCk()
    // console.log(this.$route)
  },
  methods: {
    submitFn() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        if (this.$route.params.id !== 'null') {
          await editApi(this.formData)
        } else {
          await submitApi(this.formData)
        }
        this.$refs.formRef.resetFields()
        this.$router.go(-1)
        this.$message.success('提交信息成功')
      })
      // console.log(this.formData)
    },
    handleChange(value) {
      this.formData.location = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + CodeToText[value[2]]
      this.formData.province = value[0]
      this.formData.city = value[1]
      this.formData.area = value[2]
    },
    // 获取ck
    async getCk() {
      if (this.$route.params.id !== 'null') {
        const id = this.$route.params.id
        const { data } = await getdetauksApi(id)
        this.formData = data.data
        this.selectedOptions = [this.formData.province, this.formData.city, this.formData.area]
      } else {
        const res = await getCkApi()
        this.formData.code = res.data.data
      }
    }

  }
}
</script>

<style lang="scss" scope>
  .el-input-group__append {
    background-color: #e7dfdf;
  }

</style>
